<template>
  <div
    class="chart-item"
    draggable="true"
    @dragstart="dragstart"
    @dragend="dragend"
    @dblclick="selectThree"
    :class="[chartMode === 'double' ? 'double' : '']"
  >
    <div class="title">
      <el-tooltip
        v-if="chartMode === 'double' && element.title.length > 4"
        effect="dark"
        :content="element.title"
        placement="top-end"
        :show-arrow="false"
      >
        <!-- <el-icon class="icon"><Discount /></el-icon> -->
        <span class="text">{{ element.title }}</span>
      </el-tooltip>
      <span class="text" v-else>{{ element.title }}</span>
    </div>
    <div class="image lowcode-transition">
      <img :src="imgSrc" class="img" />
    </div>
  </div>
</template>

<script setup>
import {
  componentInstall,
  fetchChartComponent,
  fetchConfigComponent,
  createComponent,
  fetchImages,
} from "../../../../packages/index.js"
import { onMounted, ref, computed } from "vue"
import { useStore } from "vuex"
// import { Discount } from "@element-plus/icons-vue"
let store = useStore()

const chartMode = computed(() => store.getters["chartLayoutStore/chartType"])

let props = defineProps({
  element: Object,
  default: () => {},
})

const DRAG_KEY = "chartdata"

let imgSrc = ref("")

onMounted(() => {
  fetchImageUrl()
})

function dragstart(e) {
  let element = props.element
  componentInstall(element.chartKey, fetchChartComponent(element))
  componentInstall(element.conKey, fetchConfigComponent(element))
  store.commit("chartEditStore/SET_EDITCANVAS", { isDrag: true })
  e.dataTransfer.setData(DRAG_KEY, JSON.stringify(element))
}
function dragend(e) {
  store.commit("chartEditStore/SET_EDITCANVAS", { isDrag: false })
}

async function selectThree() {
  let data = props.element
  // 动态注册图表组件

  componentInstall(data.chartKey, fetchChartComponent(data))
  componentInstall(data.conKey, fetchConfigComponent(data))
  // 创建新图表组件
  let newComponent = await createComponent(data)
  if (data.redirectComponent) {
    data.dataset && (newComponent.option.dataset = data.dataset)
    newComponent.chartConfig.title = data.title
    newComponent.chartConfig.chartFrame = data.chartFrame
  }

  store.commit("chartEditStore/ADD_COMPONENTLIST", newComponent) // 添加
  store.commit("chartEditStore/SET_SELECTCOMPONENT", newComponent) // 选中
}
async function fetchImageUrl() {
  imgSrc.value = await fetchImages(props.element)
}
</script>

<style lang="scss" scoped>
$halfItemWidth: 46%;
/* 内容高度 */
$centerHeight: 110px;
$halfCenterHeight: 60px;
.chart-item,
.double {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: $centerHeight;
  border: 1px solid #d9d9d9;
  margin-bottom: 10px;
  font-size: 12px;
  border-radius: 4px;
  &:hover {
    cursor: pointer;
  }
  .title {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 4px;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #d9d9d9;
    .text {
      text-align: right;
      width: 100%;
      /* 关键代码 */
      text-overflow: ellipsis; /* 溢出显示省略号 */
      overflow: hidden; /* 溢出隐藏 */
      white-space: nowrap; /* 强制不换行 */
    }
  }
  .image {
    max-width: 140px;
    height: calc(#{$centerHeight} - 20px);
    padding: 10px;
    .img {
      width: 100%;
      height: 100%;
    }
    &:hover {
      transform: scale(1.08);
    }
  }
}
.double {
  width: $halfItemWidth;
  height: $halfCenterHeight;
  .image {
    height: calc(#{$halfCenterHeight} - 20px);
  }
}
</style>
